<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
        >
          <div class="div1">客户管理</div>
        </el-breadcrumb-item
        >
        <el-breadcrumb-item
        >
          <div class="div2">通知公告</div>
        </el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 分配用户列表 -->
    <div class="table">
      <el-table
          :data="tableData.list"
          style="width: 100%"
          :cell-style="{ padding: '4px' }"
      >
        <el-table-column label="序号" width="50" type="index"></el-table-column>
        <el-table-column
            prop="noticeTitle"
            label="公告标题"
            width="120px"
        ></el-table-column>
        <el-table-column label="公告内容">
          <template slot-scope="scope">
            <p
                v-if="!scope.row.customerChannelUser"
                v-html="scope.row.noticeContent"
            ></p>
            <div v-if="scope.row.customerChannelUser&&scope.row.noticeContent!='自动同步'">
              <p>
                订单号：{{ scope.row.customerChannelUser.orderNo }} ,
                渠道:{{ scope.row.customerChannelUser.channelName }},
                客户名字:{{ scope.row.customerChannelUser.customerName }},
                电话:{{ scope.row.customerChannelUser.customerPhone }},
                入线时间:{{ scope.row.customerChannelUser.orderTimeStr }}
              </p>
              <p>
                客户信息：{{ scope.row.customerChannelUser.comment }}
              </p>
              <p>
                商品：{{ scope.row.customerChannelUser.prodName }} {{ scope.row.customerChannelUser.prodItem }}
              </p>
              <p>
                商品数量：{{ scope.row.customerChannelUser.prodNumber }}
                商品价格：{{ scope.row.customerChannelUser.prodPrice }}
                商品总价：{{ scope.row.customerChannelUser.totalMoney }}
              </p>
              <span style="margin-right:5px" v-if="scope.row.customerChannelUser&&scope.row.customerChannelUser.orderNo">收货电话:{{scope.row.customerChannelUser.addressPhone?scope.row.customerChannelUser.addressPhone:scope.row.customerChannelUser.customerPhone}}</span>
              <span>收货地址:{{ scope.row.customerChannelUser.address }}</span>
              <span style="color: red; display: inline-block; margin: 0 10px">
                支付状态：{{ scope.row.customerChannelUser.payTypeLabbl }}
              </span>
              <span>留言：{{ scope.row.customerChannelUser.customerMessage }}</span>
            </div>
            <div v-if="scope.row.customerChannelUser&&scope.row.noticeContent=='自动同步'">
                <p>
                  渠道:{{ scope.row.customerChannelUser.channelName }},
                  客户名字:{{ scope.row.customerChannelUser.customerName }},
                  电话:{{ scope.row.customerChannelUser.customerPhone }},
                  入线时间:{{ scope.row.customerChannelUser.orderTimeStr }}
                </p>
                <p>详情请到“我的客户”查看详情</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="noticeTypeName"
            label="公告类型"
            width="120px"
        ></el-table-column>
        <el-table-column
            prop="statusName"
            label="状态"
            width="120px"
        ></el-table-column>
        <el-table-column label="创建时间" width="110px">
          <template slot-scope="scope">
            {{
              scope.row.createdTime ? scope.row.createdTime : '-'
            }}
          </template>
        </el-table-column
        >
        <el-table-column label="操作" center width="150px">
          <template slot-scope="scope">
            <!-- <p class='operation' v-if='parArray.indexOf("noticeGet")!=-1'> 详情 </p> -->
            <p
                class="operation"
                v-if="parArray.indexOf('noticeDel') != -1"
                @click="delect(scope.row, scope.$index)"
            >
              删除
            </p>
            <p
                class="operation"
                @click="addCursom(scope.row)"
                v-if="
                scope.row.type == '1' &&
                parArray.indexOf('noticeAddOrder') != -1
              "
            >
              客户资料
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分配用户列表 -->
    <div style="height: 40px"></div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum >= 1">
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.totalNum"
            prev-text="上一页"
            next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: '',
      tableData: [],
      currentPage1: 1,
      pageSize: 10,
      limits: '',
      parArray: []
    }
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode == 'buybackCustomersCode'
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    // 权限设定判断
    this.listAxios(1)
  },

  methods: {
    listAxios (pageNo) {
      this.axios
        .post('/sys/v1/notice/list', {
          request: {
            noticeTitle: '',
            noticeType: '',
            pageNo: this.currentPage1,
            pageSize: this.pageSize
          },
          version: ''
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data
          }
        })
    },
    // handleCurrentChange(val) {
    //   this.listAxios(`${val}`);
    // },
    handleCurrentChange (val) {
      this.currentPage1 = val
      this.listAxios()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.listAxios()
    },
    // 检查该客户是否已被客服跟进
    addCursom (row) {
      /*
      const { customerChannelUser, noticeContent } = row
      // const est = /\d{11}/g
      const est = /(1[0-9]{2,10})|([0-9]{3,4})?[0-9]{7,8}|[\d\w]+\b@[a-zA-ZA-z0-9]+.[a-z]+/g;//匹配手机号或者固话,邮箱
      const telephoneNumberArr = noticeContent.match(est)
      let telephoneNumberStr
      for (var i = 0; i < telephoneNumberArr.length; i++) {
        //判断是否符合要求   ^[1]是从1开始的意思  [358]表示符合这3个数的的第二位数 \d$ 表示以数字结尾 {9}表示出现9次
        const cox = /^[1][358]\d{9}$/
        if (cox.test(telephoneNumberArr[i]) === true) {
          telephoneNumberStr = telephoneNumberArr[i]
        }
      }
      */
      // const params = { customerId: customerChannelUser ? customerChannelUser.assignorId.toString() : row.obj.toString(), phone: customerChannelUser ? customerChannelUser.customerPhone : telephoneNumberStr }
      const params = { customerId: row.obj.toString() }
      // 检查该客户是否已被客服跟进
      this.$api.checkFollowCustomer(params).then((res) => {
        if (res.code === 0) {
          this.$router.push({
            name: 'customerInformation',
            query: { id: row.obj, pingZ: true }
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 删除
    delect (row, index) {
      this.$confirm('确定要删除通知吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.axios.get('/sys/v1/notice/del?ids=' + row.id).then((res) => {
            // console.log(res)
            if (res.code == 0) {
              this.tableData.splice(index, 1)
              this.listAxios('1')
              this.$message.success('删除成功')
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

/deep/ .distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.operation {
  // float:left;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  color: #2d7edf;

  img {
    width: 25px;
    height: 25px;
  }
}

.operation:hover {
  cursor: pointer;
}

.table {
  /deep/ .el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/ .el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/ .el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  /deep/ .el-input--suffix .el-input__inner {
    height: 30px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
:deep(.hide-content){
  display: none !important;
}
///deep/.el-table__row td:nth-child(3){ text-align: left;}
</style>
